<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Private Browser</title>
    <link rel="shortcut icon" href="./imgs/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/vue.js"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script async src="https://cse.google.com/cse.js?cx=809883b90d0c48b5e"></script>
    <style>
        .gsc-input[name=search] {
            background: none !important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>

        <div class="top">
            <div class="search">
                <div class="gcse-search"></div>
            </div>

            <search style="max-width: 600px;padding-bottom: 20px;"></search>
    
            <brand></brand>
        </div>

        <tabbar @change="handleChangeTab"></tabbar>

        <section class="block">

            <new-box v-for="item in short" :news="item" :key="item.id"></new-box>

            <new-box box-type="big" v-for="item in long" :news="item" :key="item.id"></new-box>

            <div v-show="loading" class="loading">
                <img src="./imgs/loading.svg" alt="loading" width="50">
            </div>

        </section>
        
        <self-menu></self-menu>

        <div class="toast" :class="{show: noData}">
            No more data
        </div>

    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { brand, tabbar, newBox, menu, search } from './components/index.js'
    var vm = new Vue({
        el: '#app',
        components: {
            brand,
            tabbar,
            newBox,
            selfMenu: menu,
            search
        },
        data() {
            return {
                page: 1,
                limit: 7,
                short: [],
                long: [],
                currentType: undefined,
                loading: true,
                noData: false
            }
        },
        created() {
            this.handleFetchArticle(true)
        },
        mounted() {
            this.$nextTick(() => {
                handleReachBottom(this.handleScroll)
            })
        },
        methods: {
            handleScroll() {
                if (this.loading) {
                    return
                }

                if (this.noData) {
                    return
                }

                this.handleFetchArticle()
            },
            handleResetData() {
                this.short = []
                this.long = []
                this.page = 1
                this.noData = false
            },
            handleChangeTab(tab) {
                this.currentType = tab
                this.handleResetData()
                this.handleFetchArticle(true)
            },
            handleFetchArticle(init = false) {
                this.loading = true
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: this.page,
                        pageSize: this.limit,
                        blogTypeId: this.currentType
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.data.length == 0) {
                            this.noData = true
                            return
                        }
                        if (res.code == 0) {
                            if (init) {
                                this.short = res.data.splice(0, 5)
                            }
                            this.long.push(...res.data)
                        }
                        this.page++
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
                    .finally(() => {
                        this.loading = false
                        this.isFirst = true
                    })
            },
        }
    })
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M8Y782V4G7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-M8Y782V4G7');
</script>
</html>